<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <header class="header header-shadow">
        <!--<div class="header-left">-->
        <!--<div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>-->
        <!--</div>-->
        <!--</div>-->
        <h2 style="flex-wrap: wrap; padding: 0.15rem 0;">
            <p style="width: 100%; text-align: center; line-height: 0.36rem;">选择你的兴趣</p>
            <span style="font-size: 0.24rem;color: #666666;">- 选择越多，精彩越多 -</span>
        </h2>
    </header>
</div>
<div class="header-h" style="padding-top: 1.5rem;"></div>
<div class="interest-section" id="content">
    <!--<div class="interest">
        <div class="common-title">
            <h6>赛事</h6>
        </div>
        <ul>
            <li class="on"><a href="javascript:void(0)">挑战杯圈</a></li>
            <li><a href="javascript:void(0)">“互联网+”圈</a></li>
            <li><a href="javascript:void(0)">建模大赛圈</a></li>
            <li><a href="javascript:void(0)">模拟联合国圈</a></li>
            <li><a href="javascript:void(0)">CUFA圈</a></li>
            <li><a href="javascript:void(0)">CUBA圈</a></li>
            <li><a href="javascript:void(0)">运动会圈</a></li>
            <li><a href="javascript:void(0)">十佳歌手圈</a></li>
            <li><a href="javascript:void(0)">辩论赛圈</a></li>
            <li><a href="javascript:void(0)">辩论赛圈</a></li>
            <li><a href="javascript:void(0)">其他竞赛圈</a></li>
        </ul>
    </div>
    <div class="interest">
        <div class="common-title">
            <h6>未来计划</h6>
        </div>
        <ul>
            <li class="on"><a href="javascript:void(0)">考研圈</a></li>
            <li><a href="javascript:void(0)">保研圈</a></li>
            <li><a href="javascript:void(0)">留学圈</a></li>
            <li><a href="javascript:void(0)">实习求职圈</a></li>
            <li><a href="javascript:void(0)">兼职圈</a></li>
            <li><a href="javascript:void(0)">入党圈</a></li>
            <li><a href="javascript:void(0)">转专业圈</a></li>
            <li><a href="javascript:void(0)">技能证书圈</a></li>
        </ul>
    </div>
    <div class="interest">
        <div class="common-title">
            <h6>学生工作</h6>
        </div>
        <ul>
            <li class="on"><a href="javascript:void(0)">校级组织圈</a></li>
            <li><a href="javascript:void(0)">学生会圈</a></li>
            <li><a href="javascript:void(0)">艺术团圈</a></li>
            <li><a href="javascript:void(0)">社团联合会圈</a></li>
            <li><a href="javascript:void(0)">志愿者协会圈</a></li>
            <li><a href="javascript:void(0)">社联主席圈</a></li>
            <li><a href="javascript:void(0)">学生会主席圈</a></li>
            <li><a href="javascript:void(0)">艺术团团长圈</a></li>
            <li><a href="javascript:void(0)">竞选圈</a></li>
            <li><a href="javascript:void(0)">班长圈</a></li>
            <li><a href="javascript:void(0)">团支书圈</a></li>
            <li><a href="javascript:void(0)">学习委员圈</a></li>
            <li><a href="javascript:void(0)">团总支书记圈</a></li>
            <li><a href="javascript:void(0)">党支部书记圈</a></li>
        </ul>
    </div>-->
</div>
<div class="common-fixed-bottom">
    <a href="javascript:void(0);" tapmode onclick="submitData()" class="fixed-bottom open-btn">开启旅程</a>
</div>

<section class="mask_pop">
    <div class="mask"></div>
    <div class="msg_pop2 pop" style="display: none;">
        <div class="msg_pop_title">通知</div>
        <div class="msg_pop_content" style="text-align: center;">您没有选择任何兴趣 <br>确定要开启旅程吗？</div>
        <div class="flex_center pb20">
            <div class="btn7 mr30" onclick="popClose();">选择兴趣</div>
            <div class="btn6" onclick="intoHome();">确定开启</div>
        </div>
    </div>
</section>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">

    var circle_ids = '';//圈子id
    var param = {};
    var arr = [];//存放圈子id数组

    apiready = function () {

        setFixStatusBar(); //设置状态栏
        pop.loading();
        keybackListener()
        api.addEventListener({
            name: 'closeCurrWinIndex'
        }, function (ret, err) {
            api.closeWin();
        });


        //获取圈子列表
        get_circle();


    };

    //提交信息
    function submitData() {
        circle_ids = arr.join(',');
        console.log(jsonChange(circle_ids));
        param = {
            token: $api.getStorage('token'),
            circle_ids: circle_ids,
        };
        if (!isDefine(param.circle_ids)) {
            openApp()
        } else {
            intoHome()
        }

    }

    //提交信息并进入首页
    function intoHome() {
        console.log(jsonChange(param))
        pop.loading();
        getAjax(Interface.set_open, param, function (res) {
            console.log(JSON.stringify(res));
            pop.close();
            individualUrl('../index/index')
        })
    }

    //圈子列表
    function get_circle() {
        var circle_param = {
            token: $api.getStorage('token')
        }
        getAjax(Interface.get_circle, circle_param, function (res) {
            console.log(JSON.stringify(res));
            var data = res.data;
            var html = '';
            if (isDefine(data)) {
                // console.log(data.length)
                for (var i = 0; i < data.length; i++) {
                    if (isDefine(data[i].list)) {
                        var list = '';
                        for (var j = 0; j < data[i].list.length; j++) {
                            var defaultStatus = '';
                            if(data[i].list[j].default_status == 1){
                                defaultStatus = 'on';
                                arr.push(data[i].list[j].id);
                            }
                            list += '<li class="'+defaultStatus+'" data-id="' + data[i].list[j].id + '"><a href="javascript:void(0)">' + data[i].list[j].title + '</a></li>'
                        }
                        html += '<div class="interest">\n' +
                            '        <div class="common-title">\n' +
                            '            <h6>' + data[i].title + '</h6>\n' +
                            '        </div>\n' +
                            '        <ul>' + list + '</ul>\n' +
                            '    </div>'
                    }
                }
                $("#content").html(html);
                console.log(jsonChange(arr))
            } else {
                $("#content").html(noData);
            }
            pop.close();
        })
    }

    //选择圈子
    $(".interest-section").on('click', 'li', function () {
        var _this = $(this);
        var id = _this.attr('data-id');
        if (_this.hasClass('on')) {
            _this.removeClass('on');
            arr.splice($.inArray(id,arr),1);
        } else {
            _this.addClass('on');
            arr.push(id);
        }
        console.log(jsonChange(arr))

    });

    function openApp() {
        $(".mask").show();
        $(".mask_pop").addClass("on");
        $(".msg_pop2").show();
    }

    function popClose() {
        $(".mask").hide();
        $(".mask_pop").removeClass("on");
    }


</script>
